<template>
	<view class="container">
		<!-- <view class="container" @touchmove.stop.prevent="moveHandle"> -->
		<view class="header">
			<nav-bar title="个人中心" :color="navBarColor" :bg="navBarBg" />
			<view class="flex-space-between">
				<view class="flex-align" v-if="user_name != '' || nickname != '' ">
					<u-image :src="headimg" width="140rpx" height="140rpx" radius="70rpx" />
					<view class="info">
						<view class="name">{{nickname}}

						</view>
						<view class="flex-align">
							<view class="tag">{{user_name}}</view>
						</view>
					</view>
				</view>
				<view class="flex-align" v-else>
					<van-image width="140rpx" height="140rpx" round fit="cover"
						src="https://img.yzcdn.cn/vant/cat.jpeg" />
					<view class="info" @click="login">
						<view class="name">
							请登录
							<!-- <view style="float: left;">
								请登录
							</view>
							<view style="float: right;">
								<u-image width="34rpx" height="30rpx"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9a42e1d30c1bce1e869618f7ea2a00e91858f363.png">
								</u-image>
							</view> -->

						</view>
						<view class="flex-align">
							<view class="tag">水立方馆长</view>
						</view>
					</view>
				</view>
				<view class="role" @click="exitApp">
					会员
				</view>


			</view>
			<!-- uni.getStorageSync("entry_name" ); -->
			<view class="progress flex-space-between">
				<view class="title">
					{{entry_name}}
				</view>
				<!-- <view class="btn" @click="mySettle">
					代办场馆
				</view> -->
				<view class="btn" @click="myVenue">
					<!-- <image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fe103b5d20d5d78cfe9cdb7c306de452f7e052e1.png" /> -->
					我的场馆
				</view>
			</view>
		</view>

		<view class="menu-box">
			<view class="title">我的订单</view>
			<view class="menu-list">
				<view class="menu-item" v-for="(item,index) in menuList" :key="index">
					<view class="image">
						<image mode="aspectFit" :src="item.url" />
						<view class="icon flex-center" v-if="item.icon">{{item.icon}}</view>
					</view>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>


		<!-- 轮播 -->
		<swiper class="swiper" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="white" circular
			:indicator-dots="true" :autoplay="true" :interval="5000">
			<swiper-item class="item" v-for="(item,index) in imglist" :key="index">
				<image :src='item.img'></image>
			</swiper-item>
		</swiper>

		<!-- 推广服务 -->
		<view class="promote">
			<view class="title">推广服务</view>
			<view class="list">
				<view class="item" v-for="(item,index) in promote" :key="index"
					@click="promoteclick(item,index)">
					<image :src="item.url" />
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>

		<view class="about">
			<navigator :url="item.href" class="flex-space-between about-item" v-for="(item,index) in aboutList"
				:key="index">
				<view class="flex-align">
					<image mode="aspectFit" :src="item.url" />
					<text>{{item.text}}</text>
				</view>
				<van-icon name="arrow" size="26rpx" color="#d1d1d1" />
			</navigator>
			<view class="flex-space-between about-item" style="border-top: solid 1rpx rgb(229, 229, 229);"
				@click="Subscribe">
				<view class="flex-align">
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c3f861ba1ce8c529e129126f67a0a71cdc8d053c.png" />
					<text>消息订阅</text>
				</view>
				<van-icon name="arrow" size="26rpx" color="#d1d1d1" />
			</view>
			<view class="flex-space-between about-item" @click="tuichu">
				<view class="flex-align">
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/49cad38b56a42b540fd5c0cbaf78609c35e07f85.png" />
					<text>退出登录</text>
				</view>
				<van-icon name="arrow" size="26rpx" color="#d1d1d1" />
			</view>
		</view>
		<tabber :active="4"></tabber>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	const index = require("@/api/index/index.js");
	export default {
		mixins: [navbar({
			navBarColor: '#000'
		})],
		data() {
			return {
				imglist: [
					// {
					// 	img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/15d21986e3112012fe22cd54de7bf483a74a6f8d.png'
					// },
					{
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3422382812a7e123ae0c3e8f0c6aa03e26d010fe.png'
					},
					{
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/096903cdf22a2d1d0bd9fc64ea7ab4e98763e2e6.png'
					}
				],
				menuList: [{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fb056f2f86ac5a1cbd3bfedf0d43e669a589bbd7.png',
						text: '全部',
						icon: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/84bcd13a812f7278758ca91acfcf6c01ab175b14.png',
						text: '待付款',
						icon: '1'
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/546766565ea6747375e2cc98ff851d7be7ae07c7.png',
						text: '未完成',
						icon: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/296f3bd5e5867e3792fef84eb71cdf0b8aee82b8.png',
						text: '已完成',
						icon: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5ff28cf1e04ff084d968960b57b2b88d5f859221.png',
						text: '售后',
						icon: ''
					}
				],
				promote: [
					// {
					// 	url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5ab80019d20a8ef031760497c0b035ef6e582e3b.png',
					// 	text: '我的场地',
					// 	// text: '合作伙伴',
					// 	href: ''
					// },
					
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/abc6533de238ac38b64b76b2dbf0a590c8a3962a.png',
						text: '我的团队',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/a918661ae9e100effacd9d194548f3f622d70061.png',
						text: '渠道招募',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d49419f1947914057780db5507048097954cd33c.png',
						text: '开户列表',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/20c20da2ea4ae6d1e2ade9a79d63fd812b3e8cd4.png',
						text: '佣金管理',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7d7bf2d597882f3c8a6291e3bfe33af86e67ece3.png',
						text: '分销管理',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7d7bf2d597882f3c8a6291e3bfe33af86e67ece3.png',
						text: '机构管理',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7d7bf2d597882f3c8a6291e3bfe33af86e67ece3.png',
						text: '商城配置',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5ab80019d20a8ef031760497c0b035ef6e582e3b.png',
						text: '渠道管理',
						// text: '合作伙伴',
						href: ''
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7d7bf2d597882f3c8a6291e3bfe33af86e67ece3.png',
						text: '个人码',
						href: ''
					},
				],
				aboutList: [{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/befb4e6be2317a3beaf59ebf552453d653dc972b.png',
						text: '关于我们',
						href: '/page_other/about/about'
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2ac80dfa3c5dc83dc37fd460477ef4f63429ed64.png',
						text: '意见反馈',
						href: '/page_other/feedback/feedback'
					},
					{
						url: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b59db7aa1d26818e2d9fcf1aa3ae525a9ddad811.png',
						text: '商务合作',
						href: '/page_other/cooperate/cooperate'
					},
				],
				user_name: '',
				entry_name: '',
				nickname: '',
				headimg: '',
				user: [],
				project_id: ''
			}
		},
		onLoad() {
			this.user_name = uni.getStorageSync("user_name")
			this.entry_name = uni.getStorageSync("entry_name")
			this.nickname = uni.getStorageSync("nickname")
			this.headimg = uni.getStorageSync("headimg")

		},
		onShow() {
			// console.log(uni.getStorageSync("project_id"),'78788')
			// console.log(uni.getStorageSync("user_name"),'121212')
		},
		methods: {
			exitApp() {
				uni.showModal({
					title: '提示',
					content: '确定要退出小程序吗？',
					success: (res) => {
						if (res.confirm) {
							uni.exitMiniProgram(); // 调用退出小程序的API
						}
					}
				});
			},
			Subscribe() {
				console.log(111)
				uni.requestSubscribeMessage({
					tmplIds: [uni.getStorageSync("buy_success_id"), uni.getStorageSync("class_begin_id"), uni
						.getStorageSync("refund_success_id")
					],
					success(res) {
						console.log('订阅消息成功', res);
						// 根据返回的 res 处理后续逻辑，例如显示成功消息给用户
					},
					fail(err) {
						console.error('订阅消息失败', err);
						// 处理失败情况，例如提示用户重新尝试或检查权限设置
					}
				})
			},
			// 我要入驻
			mySettle() {
				uni.navigateTo({
					url: "/page_application/settle/agency_venues"
				})
				// uni.navigateTo({
				// 	url: "/page_application/settle/index"
				// })
			},
			// 我的场馆
			myVenue() {
				uni.navigateTo({
					url: "/page_application/venue/index"
				})
			},
			promoteclick(item, index) {
				console.log(item, index)
				if (index == 0) {
					uni.navigateTo({
						url: '/page_member/decodeurl/index'
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: '/page_system/distribution/index'
					})
				} else if (index == 5) {
					uni.navigateTo({
						url: '/page_system/organizational/index'
					})
				} else if (index == 6) {
					uni.navigateTo({
						url: '/page_system/mall/index'
					})
				} else if (index == 8) {
					uni.navigateTo({
						url: '/page_member/qecode/index'
					})
				} else if (index == 7) {
					uni.navigateTo({
						url: '/page_member/channel/index'
					})
				}
			},
			moveHandle() {},
			login() {
				uni.navigateTo({
					url: "/page_venues/login/login"
				})
			},
			tuichu() {
				// uni.clearStorage();
				// console.log( uni.getStorageSync('phoneNumber'))
				// console.log(uni.getStorageSync('passwords'),'opopo')
				uni.navigateTo({
					url: "/page_venues/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		// min-height: 100vh;
		height: 100%;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b34fc1d39971130db4e292744aaaf83cf77b9f0b.png");
		background-size: 100% 100vh;
		background-position: 0% 0%;
		padding-bottom: 180rpx;

		.header {
			padding-left: 30rpx;

			.info {
				margin-left: 30rpx;

				.name {
					color: rgb(51, 51, 51);
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 700;
					margin-bottom: 21rpx;
				}

				.tag {
					padding: 4rpx 20rpx;
					color: rgb(255, 64, 64);
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					border-radius: 60rpx;
					margin-right: 20rpx;
					border: solid 2rpx rgb(255, 64, 64);
				}
			}

			.role {
				padding: 16rpx 25rpx 17rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				background-image: linear-gradient(0deg, rgb(165, 173, 246) 0%, rgb(255, 64, 64) 0%, rgb(253, 103, 103) 51%, rgb(250, 142, 142) 100%);
				border-radius: 60rpx 0px 0px 60rpx;
			}

			.progress {
				margin-top: 41rpx;
				margin-right: 30rpx;
				padding: 18rpx 20rpx 18rpx 31rpx;
				background-image: linear-gradient(0deg, rgb(165, 173, 246) 0%, rgb(255, 64, 64) 0%, rgb(253, 103, 103) 51%, rgb(250, 142, 142) 100%);
				border-radius: 20rpx 20rpx 0px 0px;

				.title {
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 700;
				}

				.btn {
					padding: 19rpx 29rpx 19rpx 30rpx;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 500;
					background-color: rgba(243, 243, 243, 0.3);
					border-radius: 32rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.swiper {
			margin: 20rpx 30rpx;
			height: 200rpx;

			.item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.menu-box {
			padding: 30rpx 0;
			background-color: rgb(255, 255, 255);

			.title {
				padding-left: 60rpx;
				color: rgb(51, 51, 51);
				font-size: 26rpx;
				font-weight: 700;
			}

			.menu-list {
				display: flex;
				margin-top: 30rpx;

				.menu-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.image {
						position: relative;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					text {
						margin-top: 13rpx;
						color: rgb(51, 51, 51);
						font-size: 26rpx;
					}

					.icon {
						position: absolute;
						width: 21rpx;
						height: 21rpx;
						top: -10rpx;
						border-radius: 50%;
						right: -10rpx;
						color: white;
						background-color: #f63043;
						font-size: 20rpx;
					}
				}
			}
		}

		.promote {
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 13rpx 57rpx rgba(255, 64, 64, 0.11);
			border-radius: 15rpx;
			margin: 0px 30rpx;
			overflow: hidden;
			margin-top: 20rpx;

			.title {
				font-size: 26rpx;
				font-weight: 700;
				color: rgb(51, 51, 51);
				padding: 30rpx;
			}

			.list {
				padding-top: 21.5rpx;
				border-top: solid 1rpx rgb(239, 239, 239);
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				column-gap: 16rpx;

				.item {
					display: flex;
					flex-direction: column;
					padding: 17.5rpx 0 20rpx;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						margin-top: 17.5rpx;
						color: rgb(51, 51, 51);
						font-size: 26rpx;
					}
				}

			}
		}

		.about {
			margin: 0px 30rpx;
			margin-top: 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 13rpx 57rpx rgba(255, 64, 64, 0.11);
			border-radius: 20rpx;
			overflow: hidden;

			.about-item {
				padding: 39rpx 30rpx 37rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);

				&:last-of-type {
					border: none;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}

				text {
					margin-left: 25rpx;
					color: rgb(51, 51, 51);
					font-size: 26rpx;
				}
			}
		}
	}
</style>